<template>
  <div class="detail">
    <!-- 头部带返回按钮 -->
    <div class="detail-header" style="margin-left: 10px" align="left">
      <a-button @click="goBack" icon="arrow-left" style="margin-left: 10px">
        返回
      </a-button>
    </div>

    <a-layout id="components-layout-demo-custom-trigger">
      <!-- 侧边导航 -->
      <a-layout-sider
        :trigger="null"
        class="sider"
      >
        <a-menu
          theme="dark"
          mode="inline"
          :selected-keys="selectedKeys"
          @click="handleMenuClick"
        >
          <a-menu-item key="/zzqs">自助取数</a-menu-item>
          <a-menu-item key="/zyzd">主要诊断</a-menu-item>
          <a-menu-item key="/qtzd">其他诊断</a-menu-item>
          <a-menu-item key="/mjzzd">门(急)诊诊断</a-menu-item>
          <a-menu-item key="/jcxx">检查信息</a-menu-item>
          <a-menu-item key="/jyxx">检验信息</a-menu-item>
          <a-menu-item key="/yznr">医嘱内容</a-menu-item>
          <a-menu-item key="/cyyyxx">出院用药信息</a-menu-item>
        </a-menu>
      </a-layout-sider>

      <!-- 主内容区域 -->
      <a-layout>
        <!-- 顶部导航栏 -->
        <a-layout-header class="detail-layout-header">
          <span>当前查看:</span>{{ patientId }}
        </a-layout-header>

        <!-- 页面内容区域 -->
        <a-layout-content class="detail-layout-content">
          <!-- 路由视图，用于显示对应页面内容 -->
          <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>


  </div>
</template>

<script>
import {Button, Spin, Descriptions, Tag, Empty, Icon, Layout, Menu, Dropdown, Avatar} from 'ant-design-vue';
import {jzsj, zyzd} from "../api/jzsj";

export default {
  name: 'DetailPage',
  components: {
    'a-layout': Layout,
    'a-layout-sider': Layout.Sider,
    'a-layout-header': Layout.Header,
    'a-layout-content': Layout.Content,
    'a-layout-footer': Layout.Footer,
    'a-menu': Menu,
    'a-menu-item': Menu.Item,
    'a-sub-menu': Menu.SubMenu,
    'a-menu-divider': Menu.Divider,
    'a-button': Button,
    'a-icon': Icon,
    'a-dropdown': Dropdown,
    'a-avatar': Avatar
  },
  data() {
    return {
      patientId: null,
      selectedKeys: []
    }
  },
  created() {
    console.info(this.selectedKeys, '----')
    // 如果是首次加载且没有路由，跳转到第一个菜单
    if (!this.$route.path || this.$route.path === '/') {
      this.$router.push('/zzqs');
    }
  },
  mounted() {
    this.patientId = this.$route.query.id;
      this.$router.push({
        path: '/zzqs',
        query: {
          id: this.patientId
        }
      });
    console.info("第一个页面传参是:" + this.patientId);
  },
  watch: {
    // 监听路由变化，更新选中的菜单项
    $route(newRoute) {
      this.selectedKeys = [newRoute.path];
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.push('/')
    },
    handleMenuClick({key}) {
      console.info(key);
      // 处理菜单点击事件，进行路由跳转
      this.selectedKeys = [key];
      this.$router.push({
        path: key,
        query: {
          id: this.patientId
        }
      });
    }
  }
}

</script>

<style>
.detail {
  padding: 20px;
  background-color: #fff;
  min-height: 100px;
}

#components-layout-demo-custom-trigger {
  height: 100vh;
}

.detail-layout-header {
  background: #fff;
  padding: 0 10px;
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.detail-layout-content {
  margin: 10px 10px 10px 10px;
  background: #fff;
  min-height: calc(100vh - 100px);
}

.sider {
  transition: all 0.3s;
}

.detail-header {
  margin: 0 0 0 0;
}
</style>
